<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
  <head>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script type="text/javascript" src="js/jquery.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  	<style type="text/css">
	* {
	 margin:0;
	 padding:0;
	}
	img,ul,li,a,p{border:0; list-style-type:none;}
	
	.main {
		margin-left: auto;
  		margin-right: auto;
		width:560px;
		height:150px;
		border:1px solid #C4C2C2;
		margin-top:150px;
	}
	.title {
		position:relative;
		width:560px;
		height:30px;
	}
	.title ul li a{
		float:left;
		width:69px;
		height:25px;
		line-height:30px;
		text-align:center;
		font-weight:900;
		font-size:15px;
		color:#466BAE;
		background:url("background.png");
		text-decoration: none;
		border-left:1px solid #C4C2C2;
		border-bottom:#c4c2c2 1px solid;
	}
	
	.title .choose{
		color:#fff;
		height:30px;
		border:0;
		background:url("li_now.png");
	}
	.content {
		position:relative;
		width:552px;
		height:90px;
		padding-top:35px;
	}
	.search{
		position:relative;
		height:50px;
		margin-left:15px;
	}
	
	.search img {
		float:left;
		margin-right:10px;
	}
	.search input {
		float:left;
	}
	.search .text {
		width:350px;
		height:27px;
		line-height:27px;
	}
	.search .button {
		width:80px;
		height:30px;
	}
	.clear{
		clear:both;
	}
	</style>
	<script type="text/javascript">
	$(document).ready(function (){
		$("ul").find("a").click(function (){
			$("ul").find("a").removeClass("choose");
			$(this).addClass("choose");
			$("#search").attr("name",$(this).attr("id"));
			$("#img").attr("src",$(this).attr("name")+'.png');
		});
		$("#doSubmit").click(function (){
			var value = $("#search").val();
			var name = $("#search").attr("name");
			var addr = encodeURI('http://www.google.com/search?q='+value+'&newwindow=1');
			switch(name){
			case "google":
			addr=encodeURI('http://www.google.com/search?q='+value+'&newwindow=1');
			break;
			case "baidu_mp3":
			addr=encodeURI('http://mp3.baidu.com/m?f=ms&rf=idx&tn=baidump3&lf=&rn=&word='+value+'&lm=-1#1')
			break;
			case "google_pic":
			addr=encodeURI('http://www.google.com.hk/images?source=hp&newwindow=1&biw=1280&bih=856&gbv=2&aq=f&aqi=&oq=&q='+value+'&tbm=isch')
			}
			window.location = addr;
		});
	});
	</script>
  </head>
  
  <body>
   		<div class="main">
   			<div class="title">
   			<ul><li><a href="#" id="google" name="google" class="choose" onclick="return false;" onfocus="this.blur()">网页</a></li>
   				<li><a href="#" id="taobao" name="taobao" onclick="return false;" onfocus="this.blur()">购物</a></li>
   				<li><a href="#" id="baidu_mp3" name="baidu" onclick="return false;" onfocus="this.blur()">MP3</a></li>
   				<li><a href="#" id="google_pic" name="google" onclick="return false;" onfocus="this.blur()">图片</a></li>
   				<li><a href="#" id="google_news" name="google" onclick="return false;" onfocus="this.blur()">新闻</a></li>
   				<li><a href="#" id="youku" name="youku" onclick="return false;" onfocus="this.blur()">视频</a></li>
   				<li><a href="#" id="google_maps" name="google" onclick="return false;" onfocus="this.blur()">地图</a></li>
   				<li><a href="#" id="baidu_zhidao" name="baidu" onclick="return false;" onfocus="this.blur()">知道</a></li>
   			</ul>
   			</div>
   			<div class="clear"></div>
   			<div class="content">
   			<div class="search">
   				<img id="img" src="google.png"/><input type="text" name="google" class="text" id="search"/><input id="doSubmit" class="button" type="button" value="搜索"/>
   			</div>
   			</div>
   		</div>
  </body>
</html>
